<!DOCTYPE html>
<html lang="en">
<style>
    .animate span{
        display: block;
    }
    .animate input+span{

        transform:scale(0) ;
        transform-origin:15px 15px;
        transition:transform 2s cubic-bezier(.25,.1,.3,1.5);

    }
    /*.animate input:not(:focus)+span{*/
    .animate input:focus+span{
        transform:scale(1) ;
        /*反思路*/
        /*transition-timing-function:ease;*/
    }
    @keyframes animation-blink{
        50%{
            color: transparent;
        }
    }

    .blink{
        /*text-decoration:blink;*/
        /*animation: 1s animation-blink 6 alternate;*/
        animation: 1s animation-blink 6 ;
    }
    @keyframes animation-type{
        from{
            width: 0;
        }
    }
    @keyframes animation-shang{
        50%{
            border-color:transparent;
        }
    }
    .typing{
        animation:animation-type 5s steps(15),
        animation-shang 1s infinite steps(1);
        overflow: hidden;
        white-space:nowrap;
        width: 15ch;
        border-right:1px solid #000;
    }
    .animationPause{

    }
    @keyframes divMove {
        to{
            transform: rotate(360deg);
        }
    }
    @keyframes imgMove {
        from{
            transform: rotate(360deg);
        }
    }
    .roundPic{
        overflow: hidden;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: yellowgreen;
        box-sizing: border-box;
        padding: 40px;
        animation:5s divMove infinite linear;
    }
    .roundPic img{
        width: 50px;
        border-radius: 50%;
        animation:5s imgMove infinite linear;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
</head>
<body>
<div class="animate">
    <input type="text" placeholder="获得焦点提示放大">
    <span>这个是缩放的</span>
</div>
<div class="blink">
    文字闪烁
</div>
<div class="typing">
     ing typing
</div>
<div class="animationPause">

</div>
<div class="roundPic">
    <img src="image/cat.jpg" alt="">
</div>
</body>
</html>